<template>
    <a-layout id="components-layout-demo-top-side">
    <a-layout-header class="header">
      <div class="logo" >小说下载器</div>
      <a-menu
        class="menu"
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['1']"
        :style="{ lineHeight: '64px' }"
        @click="handleMenu"
      >
        <a-menu-item key="1">首页</a-menu-item>
        <a-menu-item key="2">来源</a-menu-item>
        <a-menu-item key="3">小说列表</a-menu-item>
      </a-menu>
      <UserMenu></UserMenu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px" :style="chapterStyle">
      <a-layout style="padding: 24px 0; background: #fff;margin: 16px 0" :style="chapterStyle">
        <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
    <!-- <a-layout-footer style="text-align: center">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer> -->
  </a-layout>
</template>

<script>
import UserMenu from './UserMenu'
import { mapState } from 'vuex'
export default {
  components: { UserMenu },
  computed: {
    ...mapState({
      options: state => state.Novel.options
    }),
    chapterStyle () {
      if (['novel-chapter', 'novel-detail'].includes(this.$route.name)) {
        return { background: this.options.bgColor }
      }
      return null
    }
  },
  methods: {
    handleMenu (e) {
      if (e.key === '1') {
        this.$router.push('/')
      } else if (e.key === '2') {
        this.$router.push('/source/list')
      } else {
        this.$router.push('/novel/list')
      }
    }
  }
}
</script>

<style >
  #components-layout-demo-top-side .logo {
    width: 120px;
    height: 100%;
    float: left;
    color: #ffffff;
    font-size: 20px;
  }
  .menu {
    display: inline-block;
  }
  .action {
    color: #ffffff;
    float: right;
  }
  .action-setting {
    width: 60px;
    height: 100%;
    text-align: center;
  }
</style>